<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>流程监控</title>
		<link rel="stylesheet" href="/fk-acti/resource/extjs6.0/classic/theme-crisp/resources/theme-crisp-all.css"></link>
		<script src="/fk-acti/resource/extjs6.0/ext-all.js"></script>
		<script src="/fk-acti/resource/extjs6.0/classic/locale/locale-zh_CN.js"></script>
		<script type="text/javascript" src="/fk-acti/web/resource/js/app.js"></script>
		<link rel="stylesheet" href="/fk-acti/web/resource/css/app.css"></link>
		<script type="text/javascript">
			var dataStore;
			var buttonCode; //用于actioncolumn列编辑，删除按钮的显示
			dataStore = Ext.create("Ext.data.Store", {
				autoLoad: true,
				pageSize: 15,
				sorters: {
					property: "created",
					direction: "DESC"
				},
				proxy: {
					type: "ajax",
					url: "/fk-acti/queryHistoricInstance",
					actionMethods: {
						read: "GET" // Store设置请求的方法，与Ajax请求有区别
					},
					reader: {
						type: "json",
						rootProperty: "data", // 数据(不配置的话无法接收数据)，返回的key为data
						root: "result.list",
						totalProperty: "result.pagination.total"
					}
				},
				listeners: {
					"beforeload": function(store, op, options) {
						var params = searchFormPanel.getForm().getValues();
						Ext.apply(dataStore.proxy.extraParams, params);
					}
				}
			}); //#dataStore

			var searchFormPanel = Ext.create("Ext.form.Panel", {
				width: "100%",
				frame: true,
				title: "搜索条件",
				style: {
					marginBottom: "5px"
				},
				bodyStyle: {
					padding: "10px"
				},
				buttonAlign: "center",
				collapsible: true,
				defaultType: "textfield",
				items: [{
					xtype: "container",
					layout: "hbox",
					items: [{
								fieldLabel: "流程实例名称",
								labelAlign: "right",
								xtype: "textfield",
								name: "name",
							}
					]
				}, ],
				buttons: [{
					text: "搜索",
					icon: jcapp.getIcon("magnifier.png"),
					handler: function() {
						dataStore.reload();
					}
				}, {
					text: "重置",
					icon: jcapp.getIcon("arrow_refresh.png"),
					handler: function() {
						this.up("form").getForm().reset();
					}
				}]
			}); //#searchFormPanel

			var listGridPanel = Ext.create("Ext.grid.Panel", {
				title: "流程实例列表",
				dockedItems: [{
					xtype: "pagingtoolbar",
					store: dataStore, // same store GridPanel is using
					dock: "bottom",
					displayInfo: true
				}],
				store: dataStore,
				viewConfig:{enableTextSelection:true},
				columns: [{
						header: "序号",
						xtype: "rownumberer",
						width: 60,
						align: "center"
					},
					{
						text: "流程实例ID",
						dataIndex: "processInstanceId",
						flex: 1
					},
					{
						text: "流程实例名称",
						dataIndex: "processDefinitionName",
						flex: 1
					},
					{
						text: "流程定义ID",
						dataIndex: "processDefinitionId",
						flex: 1
					},
					{
						text: "启动时间",
						dataIndex: "startTime",
						renderer: Ext.util.Format.dateRenderer('Y-m-d'),
						flex: 1
					},
					{
						text: "结束时间",
						dataIndex: "endTime",
						renderer: Ext.util.Format.dateRenderer('Y-m-d'),
						flex: 1
					},
					{
						text: "流程状态",
						dataIndex: "description",
						flex: 1,
						renderer : function(val){
							if(val==="进行中"){
								return "<span style='color:blue;'>"+val+"</span>";
							}else if(val==="已完成"){
								return "<span style='color:gray;'>"+val+"</span>";
							}
						}
					},
					{
						xtype: "actioncolumn",
						align: "center",
						text: '流程进度',
						items: [{
								xtype: 'button',
								tooltip: '流程进度',
								icon: jcapp.getIcon("application_view_detail.png"),
								handler: function(grid, rowIndex, colIndex) {
									var rec = grid.getStore().getAt(rowIndex);
									var processInstanceId = rec.get('processInstanceId');
									processInstanceTaskList(processInstanceId);
								}
							},
							{
								xtype: "container"
							},
							{
								xtype: 'button',
								tooltip: '查看流程进度图',
								icon: jcapp.getIcon("application_view_tile.png"),
								handler: function(grid, rowIndex, colIndex) {
									var rec = grid.getStore().getAt(rowIndex);
									var processInstanceId = rec.get('processInstanceId');
									getImgByInstanceId(processInstanceId);
								}
							}
						]
					}
				]
			}); //#listGridPanel

			Ext.onReady(function() {
				searchFormPanel.render(Ext.getBody());
				listGridPanel.render(Ext.getBody());
			});
		</script>
	</head>
	<body>
	
	</body>
	<script type="text/javascript" src="../task/processInstanceTaskList.js?v=1"></script>
	<script type="text/javascript" src="../workflow_instance/getImgByInstanceId.js"></script>
</html>